import React, {Component} from 'react';
import './use.css'

import { Descriptions } from 'antd';
import PubSub from "pubsub-js";


class Use extends Component {
  componentDidMount() {
    let orderNumber = 5;
    PubSub.publish("sendOrderNumber5", orderNumber);
  }

  render() {
    return (
      <div className="use">
        <Descriptions title="使用手册" column={1} bordered>
          <Descriptions.Item label="登录注册">新用户进入系统需要先进行注册，已有账号的用户需要登录，还有记住密码和忘记密码等便捷功能，已登录的账号会在浏览器中保持登录状态。</Descriptions.Item>
          <Descriptions.Item label="首页">首页可以上传图片，上传成功的图片会显示在左侧的列表中，点击左侧列表图片会放大显示在中部，点击中部图片，会开启预览模式，可以进行放大、缩小、旋转、拖拽等操作，右上方是图片的相关信息，右下方是图片的功能选项。</Descriptions.Item>
          <Descriptions.Item label="智能定点">当选中了图片并在中部显示时，点击导航栏的”智能定点“按钮，可以显示出带有医学特征点的口腔X光侧位片。</Descriptions.Item>
          <Descriptions.Item label="智能绘廓">当图片的特征点绘制出来后，点击导航栏的”绘制轮廓“按钮，可以根据特征点显示出带有医学的特征轮廓口腔X光侧位片。</Descriptions.Item>
          <Descriptions.Item label="智能配准">点击导航栏的”图像配准“按钮进入配准页面，分别选择配准前和配准后的图片，再点击配准页面的”配准“按钮，便可以显示出配准后的结果图。与首页一样，中部有预览模式，右上方是相关信息，右下方是功能选项。点击右下角的“打开已配准列表”按钮，会在右侧显示出已经完成配准的图片信息，点击对应的行可以回显在配准页面中。</Descriptions.Item>
          <Descriptions.Item label="数据管理">点击导航栏的”数据列表“按钮进入数据管理页面，可以查看上传的每一张图片信息，可以进行编辑和删除等操作，删除图片时其相关的定点图片、轮廓图片、配准图片等都会被一起删除。</Descriptions.Item>
          <Descriptions.Item label="个人中心">系统右上角包括开发团队邮箱、开发团队微信、个人账号基本信息（可以进行编辑）、系统使用手册、退出登录等。</Descriptions.Item>
        </Descriptions>
      </div>
    );
  }
}

export default Use;